<template>
  <div class="result">
    <div style="margin-bottom: 20px;" v-for="(value, t1) in Ticket" :key="t1">
      <span v-show="TicketNum == t1">
        第{{t1+1}}程:
        <span class="route_start">{{ value.tickets[0].upCity }}</span>
        <img src="../../assets/source_material/右箭头.png" alt="" srcset="" class="plane-img" />
        <span class="route_start">{{ value.tickets[0].downCity }}</span>
        <span class="route_date">{{ value.tickets[0].startDate }}</span>
      </span>
    </div>
    <div v-if="!Ticket.length">
      <TicketSort />
      <div class="empty">
        <img src="..//..//assets/没有数据.png" alt="" style="width: 150px;height: 100px;margin: auto;margin-left: 20px;">
        <span style="margin: auto;margin-left: 10px; width: 1100px;">
          您查询的的机票可能因无航班或航班座位已售完导致暂时无法查询到对应价格。建议您更换旅行日期或旅行城市重新查询。
        </span>
      </div>
    </div>
    <div style="display: flex;">
      <div class="this" @click="isShow(index)" :class="switchClass[index]" v-for="(value, index) in Ticket"
        :key="index">选择第{{ index + 1 }}程</div>
    </div>

    <div>
      <div v-for="(value, t1) in Ticket" :key="t1">
        <TicketSort :ticket="value" v-show="TicketNum == t1" />
        <!-- 已选机票 -->
        <div class="itemX" v-if="orderTickets[t1] && TicketNum == t1">
          <div class="item1">
            <div class="item-hover">
              <img :src="orderTickets[t1].companyLogos" alt="" class="imgs" />
              <div class="title1">
                <span>
                  <p class="airline_company">{{ orderTickets[t1].company }}</p>
                  <el-tooltip effect="light">
                    <template #content>
                      <div class="planeCard" v-if="data.plane != ''">
                        <el-row v-if="data.plane.airlines">
                          <el-col :span="24">
                            <div class="planeTitle">机型信息说明</div>
                          </el-col>
                          <el-col :span="24">
                            <img :src="data.plane.airlines.logos" alt="" class="imgSmall" /><label
                              class="airline_company">{{ data.plane.airlines.name }}</label><span
                              class="airline_company"> {{ orderTickets[t1].fname }}</span>
                            <!-- {{ data.plane }} -->
                          </el-col>
                          <el-col :span="24">
                            <span>计划机型：{{ orderTickets[t1].pname }}</span><span>飞机编号：{{ data.plane.serial
                            }}</span><span>
                              飞行速度：{{ data.plane.speed }}km/h</span>
                          </el-col>
                          <el-col :span="24">
                            <span>计划乘坐人数：{{ data.plane.takeNumber }}人</span>
                          </el-col>
                          <el-col :span="24">
                            <span>准点率：100%</span><span>安全到达率：100%</span><span>顾客满意程度：
                              <el-rate v-model="start" disabled show-score score-template="{value}分" show-text />
                            </span>
                          </el-col>
                          <el-col :span="24">
                            <span>头等舱设计乘坐人数：{{ data.plane.firstClass }}人 </span>
                            <span>商务舱设计乘坐人数：{{ data.plane.businessClass }}人</span>
                            <span>经济舱设计乘坐人数：{{ data.plane.economyClass }}人</span>
                          </el-col>
                        </el-row>
                      </div>
                    </template>
                    <span class="flight_number" @mouseenter="plane(orderTickets[t1].pid)">{{ orderTickets[t1].fname }}
                      {{ orderTickets[t1].pname
                      }}</span>
                  </el-tooltip>
                </span>
              </div>
              <div class="title2">
                <span class="span">{{ orderTickets[t1].startTime.slice(0, 5) }}</span>
                <div class="time1">{{ orderTickets[t1].upAirportName }}</div>
                <span class="plane-time"><Time theme="outline" size="15" fill="#6b778c" />
                  {{ orderTickets[t1].sailingTime.slice(0, 2) }}时{{ orderTickets[t1].sailingTime.slice(3, 5) }}分</span>
                <img src="../../assets/小飞机.png" alt="" srcset="" class="plane-img1" />
                <span class="span">{{ orderTickets[t1].endTime.slice(0, 5) }}</span>
                <div class="time2">{{ orderTickets[t1].downAirportName }}</div>
              </div>
              <div class="title3">
                <span>
                  <span class="text-small">￥</span>
                  <span>{{ t1 !== 0 ? orderTickets[t1].discountPrice + cumulative[t1 - 1] :
                      orderTickets[t1].discountPrice
                  }}</span> </span><span class="text-small">起</span>
                  <div class="discountClass"  v-if="orderTickets[t1].discountClass<10">经济舱{{ parseInt(orderTickets[t1].discountClass*10)/10 }}折</div>
              </div>
              <el-button type="warning" size="default" @click="zk(orderTickets[t1].id)" class="bu"
                v-if="orderTickets[t1].id != c">已选购
              </el-button>
              <el-button type="warning" size="default" @click="zk(orderTickets[t1].id)" class="bu"
                v-if="orderTickets[t1].id == c">收起
              </el-button>
            </div>
          </div>
          <div v-if="orderTickets[t1].id == c" class="ticketStore">
            <div class="ticketStore">
              <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane v-for="(tss, index) in orderTickets[t1].ticketStores" :label="tss.ticketTypeName"
                  :name="tss.ticketTypeName" :key="index">
                  <div class="st">
                    {{ tss.ticketTypeName }}
                  </div>
                  <div class="sn">剩余票数:{{ tss.ticketCount }}</div>
                  <div class="sp">
                    <span v-if="tss.ticketType != 3"> ￥:{{ t1 !== 0 ? tss.ticketPrice + cumulative[t1 - 1] :
                        tss.ticketPrice
                    }}</span>
                    <span v-else> ￥:{{ t1 !== 0 ? orderTickets[t1].discountPrice + cumulative[t1 - 1] :
                        orderTickets[t1].discountPrice
                    }} </span>
                  </div>
                  <el-button type="primary" size="default" @click="under(orderTickets[t1], tss, t1)" class="but"
                    :disabled="tss.ticketCount <= 0" v-if="t1 != Ticket.length - 1">选为第{{ t1 + 1 }}程
                  </el-button>
                  <el-button type="primary" size="default" @click="passenger(orderTickets[t1], tss)" class="but"
                    :disabled="tss.ticketCount <= 0" v-else>购票
                  </el-button>
                </el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </div>
        <span v-for="(ticket, t2) in value.tickets" v-infinite-scroll="load" v-show="TicketNum == t1" :key="t2">
          <div class="item" v-if="ticket !== orderTickets[t1]">
            <div class="item1">
              <div class="item-hover">
                <img :src="ticket.companyLogos" alt="" class="imgs" />
                <div class="title1">
                  <span>
                    <p class="airline_company">{{ ticket.company }}</p>
                    <el-tooltip effect="light">
                      <template #content>
                        <div class="planeCard" v-if="data.plane != ''">
                          <el-row v-if="data.plane.airlines">
                            <el-col :span="24">
                              <div class="planeTitle">机型信息说明</div>
                            </el-col>
                            <el-col :span="24">
                              <img :src="data.plane.airlines.logos" alt="" class="imgSmall" /><label
                                class="airline_company">{{ data.plane.airlines.name }}</label><span
                                class="airline_company"> {{ ticket.fname }}</span>
                              <!-- {{ data.plane }} -->
                            </el-col>
                            <el-col :span="24">
                              <span>计划机型：{{ ticket.pname }}</span><span>飞机编号：{{ data.plane.serial }}</span><span>
                                飞行速度：{{ data.plane.speed }}km/h</span>
                            </el-col>
                            <el-col :span="24">
                              <span>计划乘坐人数：{{ data.plane.takeNumber }}人</span>
                            </el-col>
                            <el-col :span="24">
                              <span>准点率：100%</span><span>安全到达率：100%</span><span>顾客满意程度：
                                <el-rate v-model="start" disabled show-score score-template="{value}分" show-text />
                              </span>
                            </el-col>
                            <el-col :span="24">
                              <span>头等舱设计乘坐人数：{{ data.plane.firstClass }}人 </span>
                              <span>商务舱设计乘坐人数：{{ data.plane.businessClass }}人</span>
                              <span>经济舱设计乘坐人数：{{ data.plane.economyClass }}人</span>
                            </el-col>
                          </el-row>
                        </div>
                      </template>
                      <span class="flight_number" @mouseenter="plane(ticket.pid)">{{ ticket.fname }} {{ ticket.pname
                      }}</span>
                    </el-tooltip>
                  </span>
                </div>
                <div class="title2">
                  <span class="span">{{ ticket.startTime.slice(0, 5) }}</span>
                  <div class="time1">{{ ticket.upAirportName }}</div>
                  <span class="plane-time"><Time theme="outline" size="15" fill="#6b778c" />
                    {{ ticket.sailingTime.slice(0, 2) }}时{{ ticket.sailingTime.slice(3, 5) }}分</span>
                  <img src="../../assets/小飞机.png" alt="" srcset="" class="plane-img1" />
                  <span class="span">{{ ticket.endTime.slice(0, 5) }}</span>
                  <div class="time2">{{ ticket.downAirportName }}</div>
                </div>
                <div class="title3">
                  <span>
                    <span class="text-small">￥</span>
                    <span>{{ t1 !== 0 ? ticket.discountPrice + cumulative[t1 - 1] : ticket.discountPrice }}</span>
                  </span><span class="text-small">起</span>
                  <div class="discountClass"  v-if="ticket.discountClass<10">经济舱{{ parseInt(ticket.discountClass*10)/10 }}折</div>
                </div>
                <el-button type="primary" size="default" @click="zk(ticket.id)" class="bu" v-if="ticket.id != c">预订
                  <down theme="outline" size="24" fill="#ffffff" />
                </el-button>
                <el-button type="warning" size="default" @click="zk(ticket.id)" class="bu" v-if="ticket.id == c">收起
                  <up theme="outline" size="24" fill="#ffffff" />
                </el-button>
              </div>
            </div>
            <div v-if="ticket.id == c" class="ticketStore">
              <div class="ticketStore">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                  <el-tab-pane v-for="(tss, index) in ticket.ticketStores" :label="tss.ticketTypeName"
                    :name="tss.ticketTypeName" :key="index">
                    <div class="st">
                      {{ tss.ticketTypeName }}
                    </div>
                    <div class="sn">剩余票数:{{ tss.ticketCount }}</div>
                    <div class="sp">
                      <span v-if="tss.ticketType != 3"> ￥:{{ t1 !== 0 ? tss.ticketPrice + cumulative[t1 - 1] :
                          tss.ticketPrice
                      }}</span>
                      <span v-else> ￥:{{ t1 !== 0 ? ticket.discountPrice + cumulative[t1 - 1] : ticket.discountPrice }}
                      </span>
                    </div>
                    <el-button type="primary" size="default" @click="under(ticket, tss, t1)" class="but"
                      :disabled="tss.ticketCount <= 0" v-if="t1 != Ticket.length - 1">选为第{{ t1 + 1 }}程
                    </el-button>
                    <el-button type="primary" size="default" @click="passenger(ticket, tss)" class="but"
                      :disabled="tss.ticketCount <= 0" v-else>购票
                    </el-button>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </div>
          </div>
        </span>

      </div>
    </div>
  </div>
</template>

<script setup>
import {
  reactive,
  ref,
  getCurrentInstance,
  defineProps,
  watch,
  computed,
  defineExpose,
} from "vue";
import url from "../../common/js/APIUtil";
import { ElMessage } from "element-plus";
import { useRouter, useRoute } from "vue-router";
import { useStore } from "../../store/store";
import { Log, Down, Up, Time } from "@icon-park/vue-next";
import TicketSort from "./TicketSort.vue"
import axios from "axios";
// 调用函数 获得Store
const store = useStore();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const activeName = ref("经济舱");
var c = ref();
const count = ref(6);
//搜索数据
const searchAgain = reactive({
  upCity: route.query.upCity,
  downCity: route.query.downCity,
  upDate: route.query.upDate,
});
//机票显示数据
const Ticket = reactive([])
const TicketNum = ref(0)
const cumulative = ref([])
const thisClass = ref(['thisColor1', 'thisCursor1'])
const areClass = ref(['thisColor2', 'thisCursor1'])
const noClass = ref(['thisColor2', 'thisCursor2'])
const switchClass = ref([thisClass.value, noClass.value, noClass.value, noClass.value, noClass.value])
//购票机票数据
const orderTickets = ref([])
const orderTicketsStore = ref([])

const load = () => {
  setTimeout(() => {
    count.value += 2;
  }, 500);
};

//监视选择机票计算没层价格累加
watch(() => orderTicketsStore.value, () => {


}, { deep: false })

//监视机票显示类型改变样式
watch(TicketNum, (newValue, oldValue) => {
  switchClass.value[newValue] = thisClass.value
  switchClass.value[oldValue] = areClass.value
}, { deep: false })

//切换购票显示
const isShow = (index) => {
  if (index) {
    if (orderTickets.value.length >= index) {
      TicketNum.value = index
    }
  } else {
    TicketNum.value = 0
  }
}

const again_onSubmit = async (searchAgain) => {
  Ticket.forEach((value) => {
    value.version = 0
  })
  //获取直达数据
  //加载动画启动
  store.loading = true;
  //超时响应
  setTimeout(() => {
    if (store.loading) {
      store.loading = false;
    }
  }, 5000);
  //同城拦截
  if (route.query.upCity == route.query.downCity) {
    ElMessage.error("同城航班暂不支持");
    store.loading = false;
    return false;
  }
  //axios获取所有机票信息方法
  await proxy.$http
    .get(
      url.API_GET_MULTI_TICKET +
      searchAgain.upDate +
      "/" +
      searchAgain.upCity +
      "/" +
      searchAgain.downCity
    )
    .then((res) => {
      Ticket.splice(0, Ticket.length)
      store.loading = false;
      //返回数据判定
      let data = false
      res.data.data.forEach(value => {
        if (!value) {
          data = true
        }
      })
      if (data) {
        return
      }
      res.data.data.forEach(value => {
        Ticket.push({ tickets: value, version: 0 })
      })
      Ticket.forEach(value => {
        value.tickets.sort(function (a, b) {
          return a.discountPrice - b.discountPrice;
        });
      })
      ElMessage.success(res.data.message);
    });
  if (!Ticket.length) {
    ElMessage.warning('查询为空')
  }
  Ticket.forEach((value) => {
    value.version = 1
  })
}

const handleClick = (tab, event) => {
  activeName.value = "经济舱"
};

watch(route, (newValue, oldValue) => {
  if (route.path == '/index/ticketinformation/multipass') {
    TicketNum.value = 0
    cumulative.value = []
    orderTickets.value = []
    orderTicketsStore.value = []
    Ticket.length = 0
    activeName.value = "经济舱"
    c.value = -1

    searchAgain.upCity = route.query.upCity
    searchAgain.downCity = route.query.downCity
    searchAgain.upDate = route.query.upDate
    again_onSubmit(searchAgain)
  }

}, { immediate: true })

//记录选择的机票
const under = (value, ticket, index) => {
  TicketNum.value = index + 1
  //若重新选购将清楚当前选购及后面被记录的机票同时还原样式
  if (orderTickets.value.length > index && orderTickets.value.length) {
    orderTickets.value.splice(index, orderTickets.value.length)
    orderTicketsStore.value.splice(index, orderTicketsStore.value.length)
    cumulative.value.splice(index, cumulative.value.length)
    for (let i = 0; i < switchClass.value.length; i++) {
      if (i > index + 1) {
        switchClass.value[i] = noClass.value
      }
    }
  }
  orderTickets.value.push(value)
  orderTicketsStore.value.push(ticket)
  let money = 0
  if (ticket.ticketType === 3) {
    money = eval(cumulative.value.join("+")) ? eval(cumulative.value.join("+")) + value.discountPrice : value.discountPrice
    cumulative.value.push(money)
  } else {
    money = eval(cumulative.value.join("+")) ? eval(cumulative.value.join("+")) + ticket.ticketPrice : ticket.ticketPrice
    cumulative.value.push(money)
  }
  zk(value.id)
}

const passenger = (value, ticket) => {
  orderTickets.value.push(value)
  orderTicketsStore.value.push(ticket)
  let money = 0
  if (ticket.ticketType === 3) {
    money = value.discountPrice + cumulative.value[cumulative.value.length - 1]
  } else {
    money = ticket.ticketPrice + cumulative.value[cumulative.value.length - 1]
  }

  localStorage.setItem("ticket", JSON.stringify({ multipass: orderTickets.value }));
  localStorage.setItem("tickets", JSON.stringify(orderTicketsStore.value));
  localStorage.setItem("totalPrice", JSON.stringify(money));

  router.push({
    name: "information",
  });
};
const zk = (index) => {
  if (index == c.value) {
    c.value = 0;
  } else {
    c.value = index;
  }
};
const data = reactive({
  plane: {},
})
const start = ref(5);
const plane = async (id) => {
  await axios.get(url.API_GET_Plane + "/" + id).then(res => {
    data.plane = res.data
    start.value = (Math.random() * 1 + 4).toFixed(1)
  })
}
</script>
<style scoped>
.loading {
  position: absolute;
  left: 41%;
  width: 200px;
  z-index: 998;
}

:deep(.demo-tabs > .el-tabs__content) {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}

:deep(.el-tabs__item) {
  text-align: center;
  width: 100%;
}

:deep(.el-tabs__nav-wrap) {
  overflow: visible;
}

.this {
  width: 200px;
  height: 40px;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
  align-items: center;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;

}

.result {
  width: 1300px;
  border-radius: 10px;
  margin: 20px auto;
  z-index: 100;
}

.flight_number {
  font-size: 10px;
  color: rgba(6, 127, 249, 1);
  cursor: pointer;
}

.route_start {
  font-size: 32px;
  margin: 0px 20px;
}

.route_date {
  font-size: 16px;
}

.plane-img {
  margin-top: 10px;
  width: 70px;
  height: 20px;
}

/*  */
.result {
  width: 1300px;
  border-radius: 10px;
  margin: 20px auto;
  z-index: 100;
}

.bu {
  margin-top: 28px;
  font-size: 20px;
  width: 100px;
  height: 40px;
  margin-left: 20px;
}

.ticketStore {
  width: 100%;
  height: auto;
  /* background-color: white; */
}

.thisColor1 {
  background-color: #409EFF;
}

.thisColor2 {
  color: #6b778c;
  background-color: #dedfe0;
}

.thisCursor1 {
  cursor: pointer;
}

.thisCursor2 {
  cursor: not-allowed;
}

.plane-img1 {
  margin-top: 19px;
  margin-left: -27px;
  width: 55px;
  height: 40px;
  position: absolute;
}

.plane-time {
  margin-top: 3px;
  margin-left: -37px;
  font-size: 14px;
  color: #6b778c;
  position: absolute;
}

.text-small {
  font-size: 15px;
}

.discountClass {
  margin-left: 20px;
  font-size: 8px;
  color: #6b778c;
}

.imgs {
  margin-left: 30px;
  margin-top: 30px;
  width: 40px;
  float: left;
}

.item {
  margin-top: 5px;
  border-radius: 5px;
  width: 1300px;
  min-height: 100px;
  background-color: rgba(245, 247, 250, 0.8);
  box-shadow: var(--el-box-shadow-light);
}

.itemX {
  margin-top: 5px;
  border-radius: 5px;
  width: 1300px;
  min-height: 100px;
  background-color: rgba(0, 0, 0, 0.13);
  box-shadow: 1px 1px 5px 1px rgba(0, 0, 0, 0.13);
}

.item:hover {
  background-size: 100%;
  box-shadow: 1px 1px 10px 1px rgba(0, 0, 0, 0.3), 1px 0.5px rgba(6, 127, 249, 1),
    inset 4px 0px rgba(6, 127, 249, 0.8);
  background: rgba(236, 245, 255, 0.7);
}

.item1 {
  margin-top: 5px;
  border-radius: 5px;
  width: 1300px;
  min-height: 100px;
}

.title1 {
  width: 200px;
  margin: 30px 50px;
  margin-right: 30px;
  float: left;
  margin-left: 1%;
}

.title2 {
  width: 620px;
  text-align: center;
  float: left;
  margin: 21px 0px;
}

.time1 {
  position: absolute;
  left: 38%;
}

.time2 {
  position: absolute;
  left: 52.2%;
}

.title2 .span {
  font-size: 24px;
  margin: 0px 80px;
}

.title3 {
  margin: 30px 60px 0px 60px;
  margin-right: 10px;
  width: 130px;
  float: left;
  font-size: 26px;
  color: red;
  border-bottom: 1px;
}

.but {
  float: right;
  margin-right: 15px;
  font-size: 20px;
  width: 100px;
  height: 40px;
}

.sn {
  position: absolute;
  left: 40%;
  color: rgba(22, 97, 171);
  margin-left: 20%;
  float: left;
  font-size: 20px;
  margin-top: 10px;
}

.st {
  margin-left: 20%;
  float: left;
}

.sp {
  position: absolute;
  left: 61%;
  color: rgba(228, 191, 17);
  margin-left: 15%;
  float: left;
}

.imgSmall {
  width: 20px;
  height: 20px;
}

.planeCard {
  width: 500px;
  padding: 10px;
}

.planeCard span {
  margin-left: 15px;
  margin-top: 10px;
}

.planeCard label {
  font-size: 20px;
  margin-left: 5px;
}

.planeTitle {
  font-size: 25px;
  margin-bottom: 20px;
}

.empty {
  margin-top: 20px;
  display: flex;
  width: 1300px;
  height: 150px;
  background-color: rgb(255, 242, 226);
}
</style>